GreenSock last won the day on
GreenSock had the most liked content!
GreenSock
Administrators-
Posts
23,176 -
Joined
-
Last visited
-
Days Won
820
GreenSock last won the day on
GreenSock had the most liked content!
About GreenSock
Contact Methods
- Personal Website
- CodePen
Profile Information
-
Location
Chicago Area
-
Interests
Volleyball, Basketball, Christian Apologetics, Motorcycling
GreenSock's Achievements
-
Are you looking for something like this?: https://codepen.io/GreenSock/pen/PovPzpv?editors=0010
-
Are you saying you still need help to figure out that error or are you saying you're all good now?
- 15 replies
-
- scrollsmoother
- scrollto
-
(and 2 more)
Tagged with:
-
If I understand your goal correctly, you can just use ScrollSmoother's paused() method: https://codepen.io/GreenSock/pen/vYwNNdP?editors=0010
- 15 replies
-
- 1
-
- scrollsmoother
- scrollto
-
(and 2 more)
Tagged with:
-
I read your post several times and I don't understand what you're asking, sorry. I'm not sure what you're trying to do. You seem to have .info-content-right stuff that has a width of 100% which ends up being 0 (check dev tools), so none of it would be visible anyway. I'm just completely lost about what you're trying to do, sorry. 🤷♂️
-
ScrollTrigger and cards animating vertically
GreenSock replied to Fernando Matias Cohen's topic in GSAP
Yeah, it's just a logic issue in your code: // bad .to(item, { background: "#ed3c3c",boxShadow:'0 0 16px #ed3c3c' }, 0.5 * i) // good .to(item, { background: "#ed3c3c",boxShadow:'0 0 16px #ed3c3c' }, 0.5 * (i-1)) You were running that logic on only the 2nd item and after. Thus everything starts at 0.5 seconds into the timeline. https://codepen.io/GreenSock/pen/PovweLe?editors=0010 -
You had various syntax problems and logic problems in your code. Plus you weren't loading or registering ScrollTrigger. Is this what you're looking for?: https://codepen.io/GreenSock/pen/jOoExGv?editors=1010
-
GreenSock started following Integrating Horizonal and Vertical scrolling with anchors between sections. Trying to emulate an effect on example website. , Issue with Scroll Position Resetting After Programmatic Scroll in GSAP , Scroll Trigger not stopping at end point and continue resizing the section and 3 others
-
Issue with Scroll Position Resetting After Programmatic Scroll in GSAP
GreenSock replied to chillypills's topic in GSAP
Yeah, that doesn't look like it's GSAP-related at all. GSAP seems to be doing its job, but from what I can tell, you've got some other library or logic that's implementing a fake scrollbar and it's not getting updated properly when the window is scrolled to the appropriate position. I'd recommend looking at that library to figure out what it's doing (or not doing). Maybe there's some kind of update method you need to call from within an onUpdate on the scrollTo tween to get it to update that fake scrollbar to the correct position. We can't really do much if you don't provide a minimal demo (like a CodePen or Stackblitz) or if it's not a GSAP-related issue. Hopefully this gets you going in the right direction though. Good luck! -
Does it solve it for you if you set immediateRender: false on the ScrollTrigger?: https://stackblitz.com/edit/stackblitz-starters-vynow2?file=src%2Fcomponents%2FHeroIntro%2FHeroIntro.js,src%2Fservices%2Fgsap.js
- 14 replies
-
- scrolltrigger
- nextjs
-
(and 1 more)
Tagged with:
-
Hi @WEB1995. That's actually a super complex thing to try to do because you've got some wild variation in the direction and pacing of the line. At some points the line is going UP...but you're scrolling DOWN. And sometimes it's going directly horizontal (so no vertical movement at all), while the page is scrolling down. So logically, it's literally impossible to have it "centered" the whole time (if the page is moving down and the line is moving up, see the problem?). You can sort of approximate things with the magic of that pathEase() helper, but it'll never be perfect: https://codepen.io/GreenSock/pen/BaeaZqd?editors=1010 The only way to have it perfectly centered is to take an entirely different approach, like by putting everything in a container that you then translate it dynamically to keep it centered. That's not a super simple thing either, and it's well beyond the kind of help we can provide for free in these forums, but you can contact us for paid consulting services. I hope that helps!
- 1 reply
-
- 1
-
That's just a CSS issue. There are many ways to set it up. Here are two: https://codepen.io/GreenSock/pen/rNgNwjr https://codepen.io/GreenSock/pen/zYQYzKm
-
There were quite a few problems with the logic in that demo. Lots of extra code too. Is this more like what you're trying to do?: https://stackblitz.com/edit/stackblitz-starters-bj9hsn?file=app%2Fpage.tsx
-
Yeah, that sure looks like the problem is exactly what @GSAP Helper said it was. You can't scroll to non-whole numbers. It's not a limitation of GSAP - browsers just won't do that. Since you're using ScrollSmoother, you should be able to animate its scrollTop to the exact value you need: https://codepen.io/GreenSock/pen/LYoPejL?editors=0010 Is that any better?
- 15 replies
-
- 1
-
- scrollsmoother
- scrollto
-
(and 2 more)
Tagged with: